<template>
    <div class="user-edit-wrap">
      <div class="user-edit-head">
        <div class="user-edit-top">
          <div class="user-edit-portrait text-align-c">
            <van-uploader :after-read="onRead">
              <img :src="userPortrait">
            </van-uploader>
            <p>编辑头像</p>
          </div>
        </div>
      </div>
      <div class="user-edit-cell">
          <van-field
            v-model="userName"
            label="名称"
            input-align="right"
          />
          <van-field
            v-model="hospitalName"
            label="医院"
            input-align="right"
          />
          <van-field
            v-model="departmentName"
            label="科室"
            input-align="right"
          />
          <van-field
            v-model="professionalName"
            label="职称"
            input-align="right"
          />
          <div class="register-btn" style="margin-top: 30px">
            <van-button size="large" round class="register-submit-btn" @click="submit">保存</van-button>
          </div>
          <div class="user-foot1 padding-12">
            <van-button size="large" round type="default" @click="logOut">切换账户</van-button>
          </div>
      </div>
    </div>
</template>

<script>
  import ajax from '../../module/ajax/public'
  import { getInfo } from '../../module/ajax/getUserInfo'
  import Cookie from 'js-cookie'
  import $ from 'jquery'
  import COS from 'cos-js-sdk-v5'
  import { Uploader, Field, Cell, CellGroup, Picker, DatetimePicker, Popup, Button, Area, Checkbox, CheckboxGroup,Toast, Notify } from 'vant'

  export default {
    name: 'UserEdit',
    components: {
      [Uploader.name]: Uploader,
      [Field.name]: Field,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Picker.name]: Picker,
      [DatetimePicker.name]: DatetimePicker,
      [Popup.name]: Popup,
      [Button.name]: Button,
      [Area.name]: Area,
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup
    },
    mounted () {
      this.userInfo = JSON.parse(Cookie.get('userInfo'))
      // console.log(this.userInfo);
      this.userPortrait = this.userInfo.avatar ? this.userInfo.avatar : '/static/images/user-portrait-default.png'
      this.userName = this.userInfo.nickname ? this.userInfo.nickname : this.userInfo.phone
      this.hospitalName = this.userInfo.hospital
      this.departmentName = this.userInfo.depart
      this.professionalName = this.userInfo.job
    },
    data () {
      return {
        userInfo: null,
        userPortrait: '',
        userName: '',
        hospitalName:'',
        departmentName:'',
        professionalName:''
      }
    },
    methods: {
      // 上传头像
      onRead (file) {
        Toast.loading({
          message:'头像上传中',
          duration:0,
          loadingType: 'spinner'
        })
        const cos = new COS({
          // 必选参数
          getAuthorization: function (options, callback) {
            $.post(`${process.env.API_ROOT}/cos/getTempKeys`, {
              bucket: options.Bucket,
              region: options.Region
            }, function (res) {
              const data = res.data
              callback({
                TmpSecretId: data.credentials.tmpSecretId,
                TmpSecretKey: data.credentials.tmpSecretKey,
                XCosSecurityToken: data.credentials.sessionToken,
                ExpiredTime: data.expiredTime
              })
            })
          }
        })
        // console.log(file);
        let _this = this
        let myDate = new Date()
        const fileName = 'potraitImg' + myDate.getFullYear() + (myDate.getMonth() + 1) + myDate.getDate() + myDate.getHours() + myDate.getMinutes() + myDate.getSeconds() + Math.floor(Math.random() * 100 + 1)
        // console.log('fileName',fileName);
        cos.putObject({
          Bucket: 'tupu-1259317410', /* 必须 */
          Region: 'ap-shanghai',    /* 必须 */
          Key: fileName,              /* 必须 */
          StorageClass: 'STANDARD',
          Body: file.file, // 上传文件对象
          onProgress: function (progressData) {
            // const res = JSON.stringify(progressData);
            // console.log(res);
          }
        }, function (err, data) {
          if (data.statusCode === 200) {
            _this.userPortrait = _this.GLOBAL.CDNimgUrl + fileName
            Toast.clear();
            Notify({
              message: '头像上传成功',
              background: '#0085ca'
            });
          } else {
            Toast.clear();
            Notify('头像上传失败');
            console.log(err)
          }
        })
      },
      // 保存
      submit () {
        ajax.doAction({
          url: '/edit-info',
          type: 'POST',
          items: {
            avatar: this.userPortrait,
            nickname: this.userName,
            hospital: this.hospitalName,
            depart: this.departmentName,
            job: this.professionalName
          },
          successMsg: {
            isshow: true,
            msg: '信息修改成功'
          },
          successCallback: (data) => {
            getInfo()
            setTimeout(() => {
              this.$router.push('/user')
            }, 1000)
          },
          errorCallback: (data) => {
            console.log('请求失败')
          }
        })
      },
      logOut(){
        Cookie.remove('token');
        Cookie.remove('userInfo');
        this.$router.push('/login');
      },
    }
  }
</script>

<style>
.user-edit-wrap .user-edit-head{
  background: url("/static/images/user-banner-bg.png");
  width: 100%;
  height: 174px;
  background-size: 100% 100%;
  position: relative;
}
.user-edit-wrap .user-edit-head .user-edit-top{
  background: #fff;
  border-radius: 5px;
  position: absolute;
  top:35px;
  left: 12px;
  right: 12px;
  box-sizing: border-box;
  box-shadow: 0 0 15px 0 rgba(44, 184, 115, 0.2);
  overflow: hidden;
  padding: 35px 0;
}
.user-edit-wrap .user-edit-portrait p{
  font-size: 15px;
}
.user-edit-wrap .van-uploader{
  width:57px;
  height:57px;
  overflow: hidden;
  border-radius: 50%;
  margin-bottom: 15px;
}
.user-edit-wrap .van-field__control{
  color:#969799
}
.user-edit-wrap .van-cell__value{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-edit-wrap .user-edit-cell{
  padding-top: 30px;
}
.user-edit-wrap{
  padding-bottom: 60px;
}
.user-edit-wrap .fixed-btn{
  position: fixed;
  left: 0;
  bottom:0;
  width: 100%;
  height: 65px;
  background: rgba(255,255,255,.3);
  z-index: 999;
}
</style>
